<template>
  <div class="swipdetail">
    <van-nav-bar class="nav" title="轮播图详情" left-text="" left-arrow @click-left="onClickLeft"/>
    <p class="demo"><img :src="musicInfo.albumPicUrl" class="an img"></p>
    <p>专辑：{{musicInfo.albumName}}</p>
    <p>艺术家：{{musicInfo.artistName}}</p>
    <p>类型：{{musicInfo.navigationName}}</p>
    <p><audio class="audio" autoplay :src="musicInfo.musicMp3Url" controls></audio></p>
    
  </div>
</template>

<script>
import url from '../tools/url'
export default {
  name: 'Swipdetail',
  data () {
    return {
        musicInfo:{},
    }
  },
  methods:{
      onClickLeft(){
          this.$router.go(-1);
      }
  },
  mounted() {
      var id = this.$route.query.musicId;
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&musicId=${id}`;
      this.axios.post("api3"+url.SWIPDETAIL,str).then(res=>{
          console.log(res);
          if(res.data.code == 200){
              this.musicInfo = res.data.data;
          }else{
              this.$router.push("/login").catch(e=>{});
          }
      })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.nav{
    background: #bbda66;
}
.audio{
    height: 50px;
    width: 100%;
    margin-top: 5px;
}
.demo{
    text-align: center;
    margin-top: 10px;}
    @-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.an{
    width: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    animation: rotation 5s linear infinite;
    -moz-animation: rotation 5s linear infinite;
    -webkit-animation: rotation 5s linear infinite;
    -o-animation: rotation 5s linear infinite;
}
.img{border-radius: 250px;}
p{
    color:rgba(255, 0, 0, 0.623);
}

</style>
